HTML meta Tag
HTML <meta> Tag
The <meta> tag in HTML is used to provide metadata or additional information about an HTML document. It is placed within the <head> section of an HTML document and does not require a closing tag.
Here’s an example of how the <meta> tag can be used:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a sample webpage.">
<meta name="keywords" content="HTML, metadata, example">
<title>Example Page</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
In the example above, several <meta> tags are used to provide different types of metadata:
- The
charsetattribute specifies the character encoding for the document. In this case, it is set to UTF-8, which is a widely used character encoding for handling various languages. - The
viewportattribute sets the viewport properties for responsive web design. The example above sets the width to the device width and scales the content to fit the device. - The
descriptionattribute provides a brief description of the webpage’s content. This description may be used by search engines or other applications that process the webpage. - The
keywordsattribute specifies a comma-separated list of keywords relevant to the webpage’s content. These keywords can help search engines understand the page’s topic or content.
There are various other attributes and values that can be used with the <meta> tag to provide different types of metadata. Some examples include setting the author, specifying the document’s language, indicating the expiration date, and more. The choice of which metadata to include depends on the specific requirements and purpose of the webpage.
Table contains:
Example
Describe metadata within an HTML document:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>Definition and Usage
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
There is a method to let web designers take control over the viewport (the user’s visible area of a web page), through the <meta> tag (See “Setting The Viewport” example below).
More Examples
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="HTML and CSS">
Define the author of a page:
<meta name="author" content="Mahabul Alam">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setting the Viewport
The viewport is the user’s visible area of a web page. It varies with the device – it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Very nice information found in your website, I hope this kind of information is always available, I hope that many people will find information through your website.